<template>
  <input type="text" v-model="keyWord">
  <h3>{{ keyWord }}</h3>
</template>

<script>
import {customRef, ref} from 'vue'
export default {
  name:'App',
  setup(){
    function myRef(value){
      let timer
      return customRef((track,trigger)=>{
        return {
          get(){
            console.log('有人读取自定义容器的数据了')
            track()   //追踪value的改变
            return value
          },
          set(newValue){
            clearTimeout(timer)
            value = newValue
            timer = setTimeout(() => {
              trigger()   //通知vue重新解析模板
              console.log('发生了修改',newValue)
            }, 1000);
          }
        }
      })
    }

    let keyWord = myRef('')

    return {
      keyWord,
      myRef
    }
  }
}
</script>

<style>

</style>